<template>
  <div class="app-container">
    <el-card class="topic-edit-container">
      <div slot="header" class="clearfix">
        <el-page-header @back="goBack" :content="isEdit ? '编辑论坛主题' : '新增论坛主题'">
        </el-page-header>
      </div>

      <div v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户ID" prop="uid">
                <el-input v-model="form.uid" placeholder="请输入用户ID" :disabled="isEdit" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签话题ID" prop="lableId">
                <el-input v-model="form.lableId" placeholder="请输入标签话题ID" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="标签内容" prop="lableName">
            <el-input v-model="form.label" placeholder="请输入标签内容" />
          </el-form-item>

          <el-form-item label="发表的内容" prop="content">
            <editor v-model="form.content" :min-height="192"/>
          </el-form-item>

          <el-form-item label="发表的图片" prop="imgs">
            <image-preview v-model="form.imgs"/>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="点赞数量" prop="greatNum">
                <el-input v-model="form.greatNum" placeholder="请输入点赞数量" type="number" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回复数量" prop="replyNum">
                <el-input v-model="form.replyNum" placeholder="请输入回复数量" type="number" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="举报次数" prop="reportNum">
                <el-input v-model="form.reportNum" placeholder="请输入举报次数" type="number" :disabled="isEdit" />
              </el-form-item>
            </el-col>

          </el-row>

          <el-form-item label="最后回复时间" prop="lastReplyTime">
            <el-date-picker disabled="isEdit"
              v-model="form.lastReplyTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择最后回复时间">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="置顶时间" prop="topTime" >
            <el-date-picker disabled="isEdit"
              v-model="form.topTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择置顶时间">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="操作">
            <el-button type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="goBack">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getTopic, addTopic, updateTopic } from "@/api/forum/topic";

export default {
  name: "TopicEdit",
  data() {
    return {
      loading: false,
      isEdit: false,
      form: {
        id: null,
        uid: null,
        content: null,
        imgs: null,
        lableId: null,
        lableName: null,
        greatNum: null,
        replyNum: null,
        version: null,
        reportNum: null,
        lastReplyTime: null,
        topStatus: null,
        topTime: null
      },
      rules: {
        uid: [{ required: true, message: "用户ID不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }]
      }
    }
  },
  created() {
    const id = this.$route.params.id;
    if (id) {
      this.isEdit = true;
      this.fetchTopicDetail(id);
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    fetchTopicDetail(id) {
      this.loading = true;
      getTopic(id).then(response => {
        this.form = response.data;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        this.$message.error("获取详情失败");
        this.goBack();
      });
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.isEdit) {
            updateTopic(this.form).then(response => {
              this.loading = false;
              this.$modal.msgSuccess("修改成功");
              this.goBack();
            }).catch(() => {
              this.loading = false;
            });
          } else {
            addTopic(this.form).then(response => {
              this.loading = false;
              this.$modal.msgSuccess("新增成功");
              this.goBack();
            }).catch(() => {
              this.loading = false;
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.topic-edit-container {
  padding: 20px;
}

.el-form {
  margin-top: 20px;
}

.clearfix {
  display: flex;
  align-items: center;
}
</style>
</file>
